<template>
  <div class="dashboard-container main_spac">
    <div class="mainin_df">
      <img src="@/assets/images/indexbg.png" class="index_bg" alt="">
     <!--  <ul class="boxha">
        <li>
          <div class="mainin_dfb">
            <router-link to="">
              <div class="mainin_dfp">
                <p></p>
                <p></p>
              </div>
              <div class="mainin_dfz">
                <h3>待分拣</h3>
                <p>{{ list.order_sort }}</p>
              </div>
            </router-link>
          </div>
        </li>
        <li>
          <div class="mainin_dfb">
            <router-link to="">
              <div class="mainin_dfp">
                <p></p>
                <p></p>
              </div>
              <div class="mainin_dfz">
                <h3>待发货</h3>
                <p>{{ list.order_send }}</p>
              </div>
            </router-link>
          </div>
        </li>
        <li>
          <div class="mainin_dfb">
            <router-link to="">
              <div class="mainin_dfp">
                <p></p>
                <p></p>
              </div>
              <div class="mainin_dfz">
                <h3>待收货</h3>
                <p>{{ list.order_receive }}</p>
              </div>
            </router-link>
          </div>
        </li>
        <li>
          <div class="mainin_dfb">
            <router-link to="">
              <div class="mainin_dfp">
                <p></p>
                <p></p>
              </div>
              <div class="mainin_dfz">
                <h3>待采购</h3>
                <p>{{ list.purchase }}</p>
              </div>
            </router-link>
          </div>
        </li>
        <li>
          <div class="mainin_dfb">
            <router-link to="">
              <div class="mainin_dfp">
                <p></p>
                <p></p>
              </div>
              <div class="mainin_dfz">
                <h3>待入库</h3>
                <p>{{ list.storage }}</p>
              </div>
            </router-link>
          </div>
        </li>
        <li>
          <div class="mainin_dfb">
            <router-link to="">
              <div class="mainin_dfp">
                <p></p>
                <p></p>
              </div>
              <div class="mainin_dfz">
                <h3>商户待结算</h3>
                <p>{{ list.state }}</p>
              </div>
            </router-link>
          </div>
        </li>
        <li>
          <div class="mainin_dfb">
            <router-link to="">
              <div class="mainin_dfp">
                <p></p>
                <p></p>
              </div>
              <div class="mainin_dfz">
                <h3>采购待结算</h3>
                <p>{{ list.account }}</p>
              </div>
            </router-link>
          </div>
        </li>
      </ul>
    </div>
    <div class="mainin_ul">
      <ul class="boxha">
        <li class="mainin_ulw">
          <div class="mainin_ulb">
            <div class="mainin_qxs">
              <div class="box">
                <div class="mainin_h">营业额曲线</div>
                <div class="mainin_qxs_a">
                  <el-select
                    v-model.trim="cycleid1"
                    class="wid80"
                    @change="cycleChange(1, cycleid1)"
                  >
                    <el-option
                      v-for="(item, index) in cycledata"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </div>
              </div>
              <div id="chartColumn1" style="width: 100%; height: 320px"></div>
            </div>
          </div>
        </li>
        <li class="mainin_ulw1">
          <div class="mainin_ulb">
            <div class="mainin_h">今日简报</div>
            <div class="mainin_jb">
              <ul class="boxha">
                <li>
                  <div class="mainin_jbm boxha">
                    <div>
                      <svg-icon icon-class="index_briefing1" />
                    </div>
                    <div>
                      <h3>新增订单</h3>
                      <p>
                        <span>{{ list.order_increased }}</span>
                      </p>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="mainin_jbm boxha">
                    <div>
                      <svg-icon icon-class="index_briefing2" />
                    </div>
                    <div>
                      <h3>订单金额</h3>
                      <p>
                        <span>{{ list.order_increased_money }}</span>
                      </p>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="mainin_jbm boxha">
                    <div>
                      <svg-icon icon-class="index_briefing3" />
                    </div>
                    <div>
                      <h3>同比增长</h3>
                      <p>
                        <span>{{ list.order_growth }}%</span>
                      </p>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="mainin_jbm boxha">
                    <div>
                      <svg-icon icon-class="index_briefing1" />
                    </div>
                    <div>
                      <h3>下单率</h3>
                      <p>
                        <span>{{ list.order_rate }}%</span>
                      </p>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="mainin_jbm boxha">
                    <div>
                      <svg-icon icon-class="index_briefing2" />
                    </div>
                    <div>
                      <h3>客单价</h3>
                      <p>
                        <span>{{ list.unit_price }}</span>
                      </p>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="mainin_jbm boxha">
                    <div>
                      <h3></h3>
                      <p>
                        <span>...</span>
                      </p>
                    </div>
                  </div>
                </li>
                <div class="mainin_jbb"><p></p></div>
                <li>
                  <div class="mainin_jbm boxha">
                    <div>
                      <svg-icon icon-class="index_briefing1" />
                    </div>
                    <div>
                      <h3>配送订单</h3>
                      <p>
                        <span>{{ list.order_send }}</span>
                      </p>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="mainin_jbm boxha">
                    <div>
                      <svg-icon icon-class="index_briefing2" />
                    </div>
                    <div>
                      <h3>下单金额</h3>
                      <p>
                        <span>{{ list.order_money }}</span>
                      </p>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="mainin_jbm boxha">
                    <div>
                      <svg-icon icon-class="index_briefing2" />
                    </div>
                    <div>
                      <h3>配送金额</h3>
                      <p>
                        <span>{{ list.send_money }}</span>
                      </p>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="mainin_jbm boxha">
                    <div>
                      <svg-icon icon-class="index_briefing3" />
                    </div>
                    <div>
                      <h3>分拣进度</h3>
                      <p>
                        <span>{{ list.sort_rate }}%</span>
                      </p>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="mainin_jbm boxha">
                    <div>
                      <svg-icon icon-class="index_briefing3" />
                    </div>
                    <div>
                      <h3>发货进度</h3>
                      <p>
                        <span>{{ list.send_rate }}%</span>
                      </p>
                    </div>
                  </div>
                </li>
                <li>
                  <div class="mainin_jbm boxha">
                    <div>
                      <svg-icon icon-class="index_briefing3" />
                    </div>
                    <div>
                      <h3>采购进度</h3>
                      <p>
                        <span>{{ list.purchase_percent }}%</span>
                      </p>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li>
          <div class="mainin_ulb">
            <div class="mainin_xlb">
              <div class="box">
                <div class="mainin_h">单品销售 TOP5</div>
                <div class="mainin_qxs_a">
                  <el-select
                    v-model.trim="cycleid2"
                    class="wid80"
                    @change="cycleChange(2, cycleid2)"
                  >
                    <el-option
                      v-for="(item, index) in cycledata"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </div>
              </div>
              <div id="chartColumn3" style="width: 100%; height: 340px"></div>
            </div>
          </div>
        </li>
        <li>
          <div class="mainin_ulb">
            <div class="mainin_xlb">
              <div class="box">
                <div div class="mainin_h">大类销量占比</div>
                <div class="mainin_qxs_a">
                  <el-select
                    v-model.trim="cycleid3"
                    class="wid80"
                    @change="cycleChange(3, cycleid3)"
                  >
                    <el-option
                      v-for="(item, index) in cycledata"
                      :key="index"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </div>
              </div>
              <div
                id="chartColumn2"
                style="width: 100%; height: 340px; margin-top: 10px"
              ></div>
            </div>
          </div>
        </li>
        <li>
          <div class="mainin_ulb">
            <div class="mainin_qxk">
              <div class="mainin_h">新品反馈</div>
              <div class="mainin_qxk_p">
                <ul>
                  <li
                    class="boxdq"
                    v-for="(item, index) in list.feedback"
                    :key="index"
                    @click="feedback(index)"
                  >
                    <div class="mainin_qxk_pl box">
                      <img
                        :src="
                          item.img.length != 0 ? item.img[0].img : puzzleImg
                        "
                      />
                      <div class="mainin_qxk_plw">
                        <p class="ellipsis">
                          {{ item.company_name.company_name }}
                        </p>
                        <span class="ellipsis">{{ item.content }}</span>
                      </div>
                    </div>
                    <div class="mainin_qxk_pr">查看</div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </li>
      </ul>
      -->
    </div>

    <el-image-viewer
      v-if="showViewer"
      :on-close="closeViewer"
      :url-list="picList"
    />
  </div> 
</template>

<script>
// import ElImageViewer from "element-ui/packages/image/src/image-viewer";
// import { mapGetters } from "vuex";
// import echarts from "echarts";
// import { EleResize } from "@/utils/esresize.js";
// import { chart, changeChart } from "@/api/index/index";
// import { apiUrl, objKeySort, Md5 } from "@/utils/public";
// import { puzzleImg } from "@/api/currency";

export default {
  name: "index",
  // computed: {
  //   ...mapGetters(["name", "avatar"]),
  // },
  // components: { ElImageViewer },
  data() {
    return {
      // 图片显示查看器
      showViewer: false,
      picList: [],
      // 筛选
      cycledata: [
        {
          id: 1,
          name: "一周",
        },
        {
          id: 2,
          name: "半个月",
        },
        {
          id: 3,
          name: "一个月",
        },
      ],
      cycleid1: null,
      cycleid2: null,
      cycleid3: null,
      // 列表数据
      list: {
        data: [],
      },
      // puzzleImg,
      listLoading: false,
    };
  },
  methods: {
    // 选择日期
    cycleChange(type, id) {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name, { type: type, id: id })) +
              apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { type: type, id: id }
      );
      changeChart(data).then((res) => {
        if (res.errcode == 0) {
          if (type == 1) {
            this.list.sales = res.data;
          }
          if (type == 2) {
            this.list.single = res.data;
          }
          if (type == 3) {
            this.list.category = res.data;
          }
          // 图表
          this.chartColumn(type);
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    // 新品反馈查看
    feedback(index) {
      if (this.list.feedback[index].img.length != 0) {
        this.picList = this.list.feedback[index].img.map((e) => e.img);
        this.$nextTick(() => {
          this.showViewer = true;
        });
      }
    },
    closeViewer() {
      this.showViewer = false;
    },
    // 只适用图表方法
    drawLine(dom, option) {
      if (document.getElementById(dom)) {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById(dom));
        let resizeDiv = document.getElementById(dom);

        // 清空画布
        myChart.clear();

        // 绘制图表
        myChart.setOption(option);

        let listener = function () {
          myChart.resize();
        };
        EleResize.on(resizeDiv, listener);
      }
    },
    // 图表
    chartColumn(id) {
      // 折线图
      let dom1 = "chartColumn1";
      let option1 = {
        tooltip: {
          show: true,
          trigger: "axis",
          formatter: "{a} <br/>{b} : {c}",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#03A98E",
            },
          },
        },
        grid: {
          top: 20,
          bottom: 20,
          left: 60,
          right: 40,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          axisLabel: {
            show: true,
            textStyle: {
              color: "#333",
            },
          },
          axisTick: {
            show: false,
          },
          data:
            this.list.sales.length != 0
              ? Object.entries(this.list.sales).map((e) => e[0])
              : [],
        },
        yAxis: {
          axisLine: {
            lineStyle: {
              color: "rgba(107,107,107,0.37)",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "#ccc",
              type: "dashed",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#333",
            },
          },
          axisTick: {
            show: false,
          },
          type: "value",
        },
        series: [
          {
            name: "销售额",
            data:
              this.list.sales.length != 0
                ? Object.entries(this.list.sales).map((e) => e[1])
                : [],
            symbol: "circle",
            symbolSize: 10,
            smooth: true, //这句就是让曲线变平滑的
            type: "line",
            lineStyle: {
              normal: {
                color: "#03A98E",
              },
            },
            itemStyle: {
              normal: {
                borderWidth: 3,
                borderColor: "#BAFFF4",
                color: "#03A98E",
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                    {
                      offset: 0,
                      color: "rgba(3,169,142,0)",
                    },
                    {
                      offset: 1,
                      color: "rgba(3,169,142,0.25)",
                    },
                  ]),
                },
              },
            },
          },
        ],
      };
      // 柱状图
      let dom2 = "chartColumn3";
      let option2 = {
        tooltip: {
          show: true,
          trigger: "axis",
          formatter: "{a} <br/>{b} : {c}",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#03A98E",
            },
          },
        },
        grid: {
          top: 20,
          bottom: 40,
          left: 60,
          right: 40,
        },
        xAxis: {
          type: "category",
          splitLine: {
            show: false,
            lineStyle: {
              color: "#eaeaea",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#333",
            },
          },
          axisTick: {
            show: false,
          },
          data:
            this.list.single.length != 0
              ? this.list.single.map((e) => e.name)
              : [],
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              color: "#ccc",
              type: "dashed",
            },
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#333",
            },
          },
          axisLine: {
            lineStyle: {
              color: "rgba(107,107,107,0.37)",
            },
          },
          axisTick: {
            show: false,
          },
          type: "value",
        },
        series: [
          {
            name: "销量",
            data:
              this.list.single.length != 0
                ? this.list.single.map((e) => e.order_num)
                : [],
            type: "bar",
            barWidth: 20,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "#6DF0DA",
                    },
                    {
                      offset: 1,
                      color: "#05AA8F",
                    },
                  ],
                  false
                ),
              },
            },
          },
        ],
      };
      // 饼图
      let dom3 = "chartColumn2";
      var rich = {
        name: {
          color: "#333",
          fontSize: 14,
          padding: [0, 5],
          fontWeight: "400",
          align: "right",
        },
        percent: {
          color: "#fff",
          align: "right",
          fontSize: 14,
          fontWeight: "500",
          padding: [0, 5],
        },
        hr: {
          borderColor: "#333",
          width: "100%",
          borderWidth: 1,
          height: 0,
        },
      };
      let option3 = {
        backgroundColor: "#fff",
        tooltip: {
          trigger: "item",
          position: ["50%", "50%"],
          formatter: "{a} <br/>{b}: {c}%",
        },
        grid: {
          top: 0,
        },
        series: [
          {
            name: "销量占比",
            type: "pie",
            radius: [0, "70%"],
            color: "#49dbc4",
            labelLine: {
              normal: {
                lineStyle: {
                  color: "#333",
                },
              },
            },
            label: {
              normal: {
                formatter: (params) => {
                  return "{name|" + params.name + "}";
                },
                rich: rich,
              },
            },
            data: this.list.category,
          },
          {
            name: "销量占比",
            type: "pie",
            color: "#49dbc4",
            radius: [0, "70%"],
            label: {
              normal: {
                position: "inner",
                formatter: (params) => {
                  return "{percent|" + params.percent.toFixed(0) + "%}";
                },
                rich: rich,
              },
            },
            itemStyle: {
              normal: {
                borderColor: "#fff",
                borderWidth: 5,
              },
              emphasis: {
                borderWidth: 0,
                shadowBlur: 5,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            data: this.list.category,
          },
        ],
      };

      if (id) {
        if (id == 1) {
          this.drawLine(dom1, option1);
        }
        if (id == 2) {
          this.drawLine(dom2, option2);
        }
        if (id == 3) {
          this.drawLine(dom3, option3);
        }
      } else {
        this.drawLine(dom1, option1);
        this.drawLine(dom2, option2);
        this.drawLine(dom3, option3);
      }
    },
    // 列表
    chart() {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name
      );
      chart(data).then((res) => {
        this.listLoading = false;
        if (res.errcode == 0) {
          res.data.feedback.map((e) => {
            if (e.img) {
              e.img.map((p) => {
                p.img = this.avatar.domain + p.img;
              });
            }
          });
          this.list = res.data;
          // 图表
          this.chartColumn();
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
  },
  mounted() {
    // 列表
    // this.chart();
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.dashboard-container {
  .mainin_df {
    margin-top: 15px;
    min-height: calc(100vh - 130px);
    background:#fff;
    display: flex;
    justify-content: center;
    align-items: center;
    .index_bg{
      width:50%;
    }
    ul {
      margin-left: -7px;
      margin-right: -9px;
      li {
        width: 14.28%;
        .mainin_dfb {
          height: 120px;
          padding: 10px;
          padding-left: 15px;
          padding-right: 15px;
          margin-left: 7px;
          margin-right: 7px;
          background: #dbaaec;
          a {
            display: block;
            height: 100%;
          }
        }
        .mainin_dfp {
          p {
            width: 15px;
            height: 3px;
            background: $white;
            &:last-child {
              margin-top: 3px;
            }
          }
        }
        .mainin_dfz {
          margin-top: 15px;
          h3 {
            font-size: $font_14;
            color: $white;
          }
          p {
            font-size: $font_14;
            color: $white;
            margin-top: 10px;
          }
        }
        &:nth-child(2) {
          .mainin_dfb {
            background: #ffcc8a;
          }
        }
        &:nth-child(3) {
          .mainin_dfb {
            background: #ecb8aa;
          }
        }
        &:nth-child(4) {
          .mainin_dfb {
            background: #00c387;
          }
        }
        &:nth-child(5) {
          .mainin_dfb {
            background: #2079cd;
          }
        }
        &:nth-child(6) {
          .mainin_dfb {
            background: #85d68a;
          }
        }
        &:nth-child(7) {
          .mainin_dfb {
            background: #ede2aa;
          }
        }
        &:hover {
          .mainin_dfb {
            box-shadow: 0px 0px 10px #b8b8b8;
          }
        }
      }
    }
  }
  .mainin_ul {
    margin-top: 14px;
    & > ul {
      margin-left: -7px;
      margin-right: -7px;
      & > li {
        width: 33.33%;
        height: 420px;
        overflow: hidden;
        margin-bottom: 14px;
        .mainin_jbb {
          height: 2px;
          width: 100%;
          margin-top: 10px;
          position: relative;
          p {
            position: absolute;
            width: 105.6%;
            height: 100%;
            left: -15px;
            background: #f8f9fb;
          }
        }
        .mainin_ulb {
          margin-left: 7px;
          margin-right: 7px;
          padding-left: 10px;
          padding-right: 10px;
          padding-top: 20px;
          background: $white;
          height: 100%;
        }
        .mainin_h {
          font-size: 14px;
          color: #181818;
          font-weight: bold;
          margin-left: 10px;
        }
        .mainin_qxs_a {
          margin-left: 10px;
          margin-top: -8px;
          /deep/.el-input__inner {
            border: 0;
            font-size: $font_12;
            padding-right: 10px;
          }
          /deep/.el-select__caret {
            color: $colour_18;
            line-height: 31px;
          }
        }

        .mainin_hy {
          .mainin_hya {
            font-size: $font_14;
            color: $menuActiveText;
          }
          ul {
            margin-top: 20px;
            li {
              height: 24px;
              line-height: 24px;
              margin-top: 10px;
              a {
                font-size: $font_14;
                color: $colour_18;
                span {
                  margin-right: 10px;
                }
                &:hover {
                  color: $menuActiveText;
                }
              }
            }
          }
        }
        .mainin_jb {
          ul {
            padding-left: 5px;
            padding-right: 5px;
            li {
              width: 33.33%;
              margin-top: 10px;
              .mainin_jbm {
                padding-top: 15px;
                margin-left: 10px;
                margin-right: 10px;
                padding-left: 15px;
                padding-right: 15px;
                padding-bottom: 2px;
                min-height: 78px;
                background: #f8f9fb;
                &:hover {
                  box-shadow: 0px 0px 10px #b8b8b8;
                }
                .svg-icon {
                  font-size: $font_16;
                  margin-right: 7px;
                  position: relative;
                  top: -3px;
                }
                h3 {
                  font-size: $font_14;
                  color: $colour_18;
                  min-height: 16px;
                }
                p {
                  font-size: 18px;
                  color: $menuActiveText;
                  min-height: 40px;
                  align-items: center;
                  display: flex;
                  margin-top: 5px;
                  span {
                    display: block;
                    width: 100%;
                    word-wrap: break-word;
                  }
                }
              }
            }
          }
        }
        .mainin_qxs {
          #chartColumn1 {
            margin-top: 10px;
          }
        }
        .mainin_qxk {
          background: $white;
          padding-bottom: 10px;
          .mainin_qxk_p {
            margin-top: 20px;
            ul {
              height: 340px;
              overflow-y: auto;
              padding-left: 10px;
              padding-right: 10px;
              li {
                border-bottom: 1px solid $colour_f4;
                padding-top: 10px;
                padding-bottom: 10px;
                .mainin_qxk_pl {
                  width: calc(100% - 80px);
                  img {
                    width: 48px;
                    height: 48px;
                    object-fit: cover;
                    margin-right: 10px;
                    border-radius: 1000px;
                  }
                  .mainin_qxk_plw {
                    width: 80%;
                    p {
                      font-size: 14px;
                      color: #333;
                      height: 20px;
                      line-height: 20px;
                      margin-top: 5px;
                    }
                    span {
                      font-size: 14px;
                      color: #555;
                      display: block;
                      height: 20px;
                      line-height: 20px;
                      margin-top: 5px;
                    }
                  }
                }
                .mainin_qxk_pr {
                  text-align: right;
                  font-size: 14px;
                  color: #4f4f4f;
                }
                &:hover {
                  cursor: pointer;
                }
                &:last-child {
                  border: 0;
                }
              }
            }
          }
        }
        .mainin_xlb {
          height: 285px;
          padding-bottom: 10px;
          #chartColumn1,
          #chartColumn2 {
            margin-top: 20px;
          }
          .mainin_xlb_p {
            border: 1px solid $colour_f4;
            margin-top: 20px;
            ul {
              height: 340px;
              overflow-y: auto;
              padding-left: 10px;
              padding-right: 10px;
              li {
                padding-top: 10px;
                padding-bottom: 10px;
                font-size: 14px;
                color: #333;
                .mainin_xlb_pw {
                  width: calc(100% - 80px);
                  p {
                    width: calc(100% - 85px);
                    margin-left: 5px;
                  }
                }
                em {
                  text-align: center;
                  color: #555;
                }
              }
            }
          }
        }
        &.mainin_ulw {
          width: 65%;
        }
        &.mainin_ulw1 {
          width: 35%;
        }
      }
    }
  }
}
</style>
